import { devPackageAdd, devPackageDel, devPackageEdit, devPackageFind } from "@/api/modules/system/devPackage";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { MessageType } from "@/enums/messageEnum";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { confirm, showMsg, showTips } from "@/utils/util";
import BasicDialog from "./components/detailDialog";
import SelectProductList from "@/components/Sansan/SelectProductList";
export default defineComponent({
	setup() {
		const initParam = reactive({ productId: "" });

		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current || 1,
				pageSize: data.size
			};
		};

		const getTableList = async (params: any) => {
			return devPackageFind(params);
		};
		const buttonsList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			buttonsList.value = await useAuthButtons();
		});
		const detailDialog = reactive<any>({
			title: "新增固件",
			detail: {},
			visible: false
		});
		const clickBtn = async (fn: string, row?: any) => {
			let selected: any[] = row ? row.selectList || [row] : [];
			switch (fn) {
				case "mod":
					if (selected.length != 1) {
						showMsg("请选择一条数据", MessageType.warning);
						return;
					}
					detailDialog.title = "编辑固件";
					detailDialog.detail = selected[0];
					detailDialog.visible = true;
					break;
				case "add":
					detailDialog.detail = {};
					detailDialog.visible = true;
					break;
				case "del":
					if (!selected.length) {
						showMsg("请选择要删除的数据", MessageType.warning);
						return;
					}
					confirm({ content: "删除后无法找回，确定删除当前选择的数据" }).then(flag => {
						flag && submitDel({ id: selected.map(item => item.id).join(",") });
					});
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "name", label: "固件名称", search: { el: "input" } },
			{ prop: "version", label: "固件版本" },
			{ prop: "productName", label: "所属产品" },
			{ prop: "productId", label: "所属产品", search: { slot: {} }, isShow: false },
			{ prop: "packagePath", label: "安装包" },
			{ prop: "createTime", label: "创建时间" },
			{ prop: "remark", label: "备注" },
			{ prop: "operation", label: "操作", fixed: "right", width: 130 }
		];

		const proTable = ref<any>();
		const submitDel = async (dataInfo: any) => {
			let res = await devPackageDel({ ...dataInfo });
			let ok = showTips(res.code, "删除", res.message);
			if (ok) {
				proTable.value.clearSelection();
				proTable.value.reset();
			}
		};
		const submitAdd = async () => {
			let api = detailDialog.detail.id ? devPackageEdit : devPackageAdd;
			let res = await api({ ...detailDialog.detail });
			let ok = showTips(res.code, detailDialog.detail.id ? "编辑" : "添加", res.message);
			if (ok) {
				detailDialog.visible = false;
				proTable.value.getTableList();
			}
		};
		const selectProductRef = ref();
		return () => {
			return (
				<div>
					<BasicDialog
						width="600px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={detailDialog.detail}
						onSubmit={() => submitAdd()}
					></BasicDialog>
					<ProTable
						ref={proTable}
						title={buttonsList.value.length ? "" : "远程升级"}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						dataCallback={dataCallback}
						onReset={() => {
							initParam.productId = "";
							selectProductRef.value.init();
						}}
					>
						{{
							"search-productId": () => {
								return <SelectProductList ref={selectProductRef} v-model={initParam.productId} />;
							},
							tableHeader: (scope: any) => {
								return buttonsList.value?.map((item: any) => {
									return (
										<el-button onClick={() => clickBtn(item.path, scope)} type={item.btnClass}>
											<i class={`iconfont ${item.icon}`}></i>
											{item.menuName}
										</el-button>
									);
								});
							},
							operation: (scope: any) => {
								return (
									<>
										<el-link
											type="primary"
											link
											class="iconfont iconbx-file"
											onClick={() => {
												clickBtn("mod", scope.row);
											}}
										>
											详情
										</el-link>
									</>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
